<template>
  <Header :info="info" />
  <StatisticsSearch class="search_box" :options="statisOptions" @submit="onSubmit" />
  <Statics :basic="basic" />
  <Charts :chart="chart" @submit="getstatchartListFun" />
  <Table :timeoutId="timeout_id"></Table>
</template>
<script setup lang="ts">
  import { ref, reactive, onMounted, nextTick } from 'vue'
  import Header from './components/Header.vue'
  import Statics from './components/Statics.vue'
  import Charts from './components/Chart.vue'
  import Table from './components/Table.vue'
  import StatisticsSearch from '@/components/zw/statistics-search/StatisticsSearch.vue'
  import { getBasicData, trensChart } from '@/api/employe/staffsupervision/timeoutreplay'
  import { getDay } from '@/utils/utils'
  import { useRoute } from 'vue-router'
  const route = useRoute()
  const info = ref({})
  const basic = ref({})
  const chart = ref({
    num: [],
    time: []
  })
  const timeout_id = ref()
  const chartType = ref(1)
  const chartTime = ref([getDay(-6), getDay(0, true)])

  const statisOptions = reactive([
    {
      label: '时间筛选',
      type: 'dateFilter',
    }
  ])

  const onSubmit = (data:any) => {
    nextTick(() => {
      if(data.times) {
        chartTime.value = data.times
        basicData()
        getChart()
      }
    })
  }

  const getstatchartListFun = (val: any) => {
    chartType.value = val
    getChart()
  }
  const basicData = (val?: any) => {
    const params = {
      timeout_remind_rule_id: timeout_id.value,
      trigger_time: chartTime.value
    }
    getBasicData(params).then((res: any) => {
      basic.value = res
    })
  }
  const getChart = (val?: any) => {
    let params = {
      type: chartType.value,
      timeout_remind_rule_id: timeout_id.value,
      trigger_time: chartTime.value
    }
    trensChart(params).then((res: any) => {
      chart.value.num = res.data
      chart.value.time = res.time
    })
  }
  onMounted(() => {
    let routeData = route.query
    info.value = {
      title: decodeURIComponent(routeData.title),
      created_name: decodeURIComponent(routeData.created_name),
      created_at: decodeURIComponent(routeData.created_at)
    }
    timeout_id.value = routeData.id
    basicData()
    getChart()
  })
</script>
<style lang="scss" scoped>
.search_box {
  width: 100%;
  margin-bottom: 14px;
}
</style>
